<template>
  <!--  <view class='page'>-->
  <!--    <view class='top'>-->
  <!--      <text class='one'>邀请好友线上办卡</text>-->
  <!--      <text class='two'>免于排队，不用等待，足不出户，上门服务</text>-->
  <!--    </view>-->
  <!--    <view class='center'>-->
  <!--      <image class='flower' src='../../static/flower.png' mode=''></image>-->
  <!--      <view class='text'>-->
  <!--        <text class='one'>回收站</text>-->
  <!--        <text class='two'>扫码，了解详细内容哦～</text>-->
  <!--      </view>-->
  <!--      <view class='code'>-->
  <!--        <image class='qrcode' src='../../static/flower.png' mode=''></image>-->
  <!--        <image class='border' src='../../static/border.jpg' mode=''></image>-->
  <!--      </view>-->
  <!--    </view>-->
  <!--    <view class='btns'>-->
  <!--      <button>保存图片</button>-->
  <!--      <button>马上分享给好友</button>-->
  <!--    </view>-->
  <!--    <view class='bottom'>-->
  <!--      <text>抓紧把它分享给，公主和王子们吧，体验皇家服务</text>-->
  <!--    </view>-->
  <!--  </view>-->
  <view class='page'>
    <view class='center'>
      <image show-menu-by-longpress style='height: 100%;width: 100%' mode='aspectFit'
             :src='imageUrl'></image>
    </view>
    <view class='btns'>
      <button @click='saveBtn'>保存图片</button>
      <button @click='shardImage'>马上分享给好友</button>
    </view>
    <view class='bottom'>
      <text>抓紧把它分享给，公主和王子们吧，体验皇家服务</text>
    </view>
  </view>
</template>

<script setup>

import { onMounted, ref } from 'vue'
import { checkProxy } from '@/api/list'
import { createProxy, generateImage } from '@/api/user'
import { image } from '@/uni_modules/uv-ui-tools/libs/function/test'

const imageUrl = ref()
onMounted(() => {
  checkProxy().then(value => {
    if (value.data === 1) {
      //是代理
      generateImage().then(res => {
        imageUrl.value = res.data
      })
    } else {
      //不是代理
      uni.showModal({
        title: '提示',
        content: '请申请成为代理才能分享店铺获取收益哦',
        confirmText: '去申请',
        cancelText: '返回',
        success: function(res) {
          if (res.confirm) {
            uni.showModal({
              title: '提示',
              placeholderText: '请填写申请理由',
              editable: true,
              confirmText: '继续',
              cancelText: '取消',
              success: function(res) {
                //用户点击申请
                createProxy({ reason: res.content }).then(value => {
                  uni.showToast({
                    title: '申请成功',
                    icon: 'none'
                  })
                })
              }
            })

          } else if (res.cancel) {
            uni.navigateBack()
          }
        }
      })
    }
  })
})

const saveBtn = () => {
  uni.downloadFile({
    url: imageUrl.value,
    success: (res) => {
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function() {
          uni.showToast({
            position: 'center',
            icon: 'none',
            title: '图片保存成功，请到手机相册查看'
          })
        },
        fail(e) {
          uni.showModal({
            content: '保存相册失败，errCode：' + e.errCode + '，errMsg：' + e.errMsg + '，errSubject：'
              + e.errSubject,
            showCancel: false
          })
        }
      })
    },
    fail: (e) => {
      uni.showModal({
        content: '获取海报失败，errCode：' + e.errCode + '，errMsg：' + e.errMsg + '，errSubject：'
          + e.errSubject,
        showCancel: false
      })
    }
  })

}

const shardImage = () => {
  uni.downloadFile({
    url: imageUrl.value,
    success: (res) => {
      wx.showShareImageMenu({ //分享给朋友
        path: res.tempFilePath,
        success: (res) => {
          uni.showToast({
            position: 'center',
            icon: 'none',
            title: '分享成功'
          })
        },
        fail: (err) => {
          console.log('分享取消:', err)
        }
      })
    }
  })

}
</script>

<style lang='scss' scoped>
.page {

  .center {
    width: 90%;
    height: 900rpx;
    padding: 24rpx;
    border-radius: 72rpx;
    box-shadow: 0 3rpx 18rpx 0 rgba(0, 0, 0, 0.16);
    margin: 100rpx auto 30rpx;
    position: relative;
  }

  .btns {
    display: flex;
    align-items: center;
    justify-content: space-around;

    button {
      border-radius: 69rpx;
      font-size: 32rpx;
      height: 100rpx;
      line-height: 100rpx;

      &:first-child {
        background-color: #ccc;
        width: 262rpx;
      }

      &:last-child {
        background-color: $brand-theme-color;
        color: #fff;
        width: 386rpx;
      }
    }
  }

  .bottom {
    margin: 75rpx;
    font-size: 24rpx;
    color: #ccc;
  }
}
</style>
